<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.5 Helvetica Neue,
                Helvetica,
                Arial,
                Microsoft Yahei,
                Hiragino Sans GB,
                Heiti SC,
                WenQuanYi Micro Hei,
                sans-serif;
        }

        ul,
        ol {
            list-style-type: none;
        }

        .header {
            height: 50px;
            min-width: 1226px;
            width: 100%;
            background-color: #333;
        }

        .main {
            width: 1226px;
            margin: 0 auto;
        }

        .nav {
            height: 100px;
            background-color: burlywood;
        }

        .goods {
            position: relative;
            height: 460px;
        }

        .goods li {
            position: absolute;
        }

        .goods img {
            width: 100%;
            vertical-align: bottom;
        }

        .adv {
            height: 170px;
            margin-top: 14px;
            overflow: hidden;
        }

        .service {
            float: left;
            width: 234px;
            height: 100%;
            background-color: #5f5750;
            overflow: hidden;
            text-align: center;
        }

        .service ul {
            padding: 3px;
        }

        .service li {
            float: left;
            width: 70px;
            height: 82px;
            padding: 0 3px;
        }

        .service a {
            display: block;
            color: white;
            opacity: .7;
            padding-top: 18px;
            font-size: 12px;
            text-decoration: none;
        }

        .service img {
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }

        .product-adv {
            float: left;
            width: 978px;
            height: 100%;
            margin-left: 14px;
            overflow: hidden;
        }

        .product-adv li {
            float: left;
            width: 316px;
        }

        .product-adv img {
            width: 100%;
        }

        .product-adv>ul>li:nth-child(2) {
            margin: 0 15px;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="main">
        <div class="nav"></div>
        <div class="content">
            <ul class="goods">
                <li><a href="#"><img src="./static/bc270e3f0d384079c74e578933232944.jpg" alt=""></a></li>
                <li><a href="#"><img src="./static/56e491c83bde043ca4e8ff2d8255dfef.webp" alt=""></a></li>
                <li><a href="#"><img src="./static/6bd4174b8c5aad67a64864a5716ad152.webp" alt=""></a></li>
                <li><a href="#"><img src="./static/755aca9487082e7698e16f17cfb70839.webp" alt=""></a></li>
                <li><a href="#"><img src="./static/dcb09c80c58dc9d71623c925739a3733.webp" alt=""></a></li>
            </ul>
            <div class="adv">
                <div class="service">
                    <ul>
                        <li><a href="#"><img src="./static/miaosha.png" alt="">小米秒杀</a></li>
                        <li><a href="#"><img src="./static/tuangou.png" alt="">企业团购</a></li>
                        <li><a href="#"><img src="./static/tongdao.png" alt="">F码通道</a></li>
                        <li><a href="#"><img src="./static/mifen.png" alt="">米粉卡</a></li>
                        <li><a href="#"><img src="./static/huanxin.png" alt="">以旧换新</a></li>
                        <li><a href="#"><img src="./static/huafei.png" alt="">花费充值</a></li>
                    </ul>
                </div>
                <div class="product-adv">
                    <ul>
                        <li><a href="#"><img src="./static/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./static/94c74e01afe50a86c3a87ff030b85781.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./static/816a66edef10673b4768128b41804cae.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>